<template>
  <div class="Mobile_box">
    <div class="title">
      <h2>笔记本 | 平板</h2>
      <span ><p ref="span1">热门</p></span>
    </div>
    <div class="Moblie_left">
      <img src="../assets/NoteBook.png" alt="" />
    </div>

    <div class="Moblie_right">
      <ul>
        <li v-for="item in NotebookList" :key="item.url">
          <a href="#">
            <div class="tp_box">
              <img :src="item.url" alt="" />
              <h3 class="title2">{{ item.title }}</h3>
              <p class="desc">{{ item.text }}</p>
              <div class="center">
                <p class="price">{{ item.price }}</p>
                <del>{{ item.Discount }}</del>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "MobilePhone",
  mounted(){
    this.$refs.span1.style.color = "#ff6700";
    this.$refs.span1.style.borderBottom = "3px solid #ff6700";
  },
  data() {
    return {
      NotebookList: [
            {
              url: require("../assets/MuenImg/Notebook01.png"),
              title: "Xiaomi Book Pro 14 锐龙版",
              text: "全新12代英特尔处理器",
              price: "6399元起",
              Discount: "6699元",
            },
            {
              url: require("../assets/MuenImg/Notebook02.png"),
              title: " Xiaomi Book Pro 14 锐龙版",
              text: "全新12代英特尔处理器",
              price: "319元起",
            },
            {
               url: require("../assets/MuenImg/Notebook03.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "899元起",
              Discount: "1099元",
            },
            {
               url: require("../assets/MuenImg/Notebook04.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "8999元起",
            },
            {
            url: require("../assets/MuenImg/Notebook05.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "8999元起",
            },
            {
              url: require("../assets/MuenImg/Notebook06.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "899元起",
              Discount: "1099元",
            },
            {
             url: require("../assets/MuenImg/Notebook01.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "8999元起",
            },
            {
            url: require("../assets/MuenImg/Notebook01.png"),
              title: "Xiaomi MIX Fold 2",
              text: "全新12代英特尔处理器",
              price: "8999元起",
            },
          ],
        
      
    };
  },
}
</script>

<style scoped>
.Mobile_box {
  margin: 40px auto;
  width: 1226px;
  height: 686px;
}
.Mobile_box .title {
  margin-bottom: 3px;
  width: 100%;
  height: 40px;
}
.Mobile_box .title h2 {
  float: left;
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 40px;
  color: #333;
}
.Mobile_box .title span {
  display: inline-block;
  float: right;
  margin-right: 20px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 200;
  color: #333;
  cursor: pointer;
}

.Mobile_box .title span p {
  font-size: 21px;
  height: 35px;
}
.Mobile_box .title span:hover {
  color: coral;
  transition: all 0.3s;
}

/* 左广告图片盒子 */
.Moblie_left {
  float: left;
  width: 234px;
  height: 614px;
  transition: all 0.7s;
}
.Moblie_left:hover {
  box-shadow: 2px 2px 20px 10px rgb(227, 227, 227);
  transition: all 0.5s;
  transform: translateY(-3px);
}
.Moblie_left img {
  width: 234px;
  height: 614px;
}

/* 右商品展示列表 */
.Moblie_right {
  float: right;
  width: 988px;
  height: 614px;
}
.Moblie_right ul li {
  float: left;
  width: 233px;
  height: 300px;
  transition: all 0.5s;
  margin-left: 14px;
  margin-bottom: 14px;
  background-color: #fff;
  transition: all 0.5s;
}
.Moblie_right ul li:hover {
  box-shadow: 2px 8px 18px 5px rgb(219, 219, 219);
  transition: all 0.5s;
  transform: translateY(-3px);
}

.Moblie_right ul li a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}
/* 图片盒子 */
.Moblie_right .tp_box {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
}
/* 图片大小 */
.Moblie_right .tp_box img {
  width: 160px;
  height: 160px;
}
/* 标题 */
.Moblie_right .tp_box .title2 {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
/* 介绍 */
.Moblie_right .tp_box .desc {
  display: block;
  margin: 10px 0px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* 价格 */
.Moblie_right .tp_box .price {
  float: left;
  margin-left: 17px;
  color: #ff6700;
}

.Moblie_right .tp_box del {
  float: left;
  font-size: 15px;
  margin-left: 0.5em;
  color: #b0b0b0;
}
</style>
